<template slot-scope="scope">
    <div class="Tab">
        <el-tabs :tab-position="tabPosition" type="border-card" style="margin: 20px; height: 825px">
            <el-tab-pane label="项目管理">
                <!-- 新增按钮 -->
                <el-button type="primary" @click="drawer = true" style="margin-left: 16px" class="An">新增</el-button>
                <!-- 弹出层 -->
                <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
                    <div class="demo-drawer__content">
                        <!-- form表单 -->
                        <el-form :model="form">
                            <el-form-item label="项目编号" :label-width="formLabelWidth">
                                <el-input v-model="form.ProId" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="项目名称" :label-width="formLabelWidth">
                                <el-input v-model="form.ProName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="实施单位" :label-width="formLabelWidth">
                                <el-input v-model="form.ProUnit" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="立项时间" :label-width="formLabelWidth">
                                <el-input v-model="form.CrateTime" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div>
                            <el-button type="primary" @click="GetForm()">确定</el-button>
                        </div>
                    </div>
                </el-drawer>
                <!-- 项目详情 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="ProName" label="项目名称"> </el-table-column>
                    <el-table-column prop="ProId" label="项目编号"> </el-table-column>
                    <el-table-column prop="ProUnit" label="项目单位"> </el-table-column>
                    <el-table-column prop="CrateTime" label="立项时间"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button class="AA" @click="handleClick(scope.row), (drawer_1 = true)" type="primary">编辑</el-button>
                            <el-drawer :visible.sync="drawer_1" :with-header="false">
                                <div><h1>项目信息</h1></div>
                                <el-form v-model="active_1">
                                    <el-form-item label="项目编号" :label-width="formLabelWidth">
                                        <el-input v-model="active_1.ProId" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="项目名称" :label-width="formLabelWidth">
                                        <el-input v-model="active_1.ProName" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="项目单位" :label-width="formLabelWidth">
                                        <el-input v-model="active_1.ProUnit" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="负责人" :label-width="formLabelWidth">
                                        <el-input v-model="active_1.ProUser" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-button type="primary" @click="Getadd1">确定</el-button>
                                </el-form>
                            </el-drawer>
                            <el-button class="AA" type="primary" @click="SetClear()">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="部门管理">
                <!-- 对话框 -->
                <el-button type="primary" @click="dialogVisible_1 = true" style="margin-left: 16px" class="An">新增</el-button>
                <el-dialog title="提示" :visible.sync="dialogVisible_1" width="30%">
                    <el-form>
                        <el-form-item label="部门编号" :label-width="formLabelWidth">
                            <el-input v-model="active.branchNum" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="部门名称" :label-width="formLabelWidth">
                            <el-input v-model="active.branchName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="公司编号" :label-width="formLabelWidth">
                            <el-input v-model="active.unitStatus" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人" :label-width="formLabelWidth">
                            <el-input v-model="active.principal" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人电话" :label-width="formLabelWidth">
                            <el-input v-model="active.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item :label-width="formLabelWidth">
                            <el-button type="primary" @click="GetSucces2()" class="zc"> 添加</el-button>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible_1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible_1 = false">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 部门信息 -->
                <el-table :data="bumen" border style="width: 100%">
                    <el-table-column prop="branchNum" label="序号"> </el-table-column>
                    <el-table-column prop="branchName" label="单位名称"> </el-table-column>
                    <el-table-column prop="unitStatus" label="单位编号"> </el-table-column>
                    <el-table-column prop="principal" label="负责人"> </el-table-column>
                    <el-table-column prop="phone" label="联系电话"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button class="AA" type="primary" @click="handleClick_1(scope.row), (drawer_3 = true)">编辑</el-button>
                            <el-drawer :visible.sync="drawer_3" :with-header="false">
                                <div><h1>|部门信息</h1></div>
                                <el-form v-model="information">
                                    <el-form-item label="单位名称" :label-width="formLabelWidth">
                                        <el-input v-model="information.branchName" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="单位编号" :label-width="formLabelWidth">
                                        <el-input v-model="information.branchNum" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="负责人" :label-width="formLabelWidth">
                                        <el-input v-model="information.principal" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话" :label-width="formLabelWidth">
                                        <el-input v-model="information.phone" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-button type="pramary" @click="Getadd()">确定</el-button>
                                </el-form>
                            </el-drawer>
                            <el-button class="AA" type="primary" @click="SetClear2()">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="用户管理">
                <!-- 用户注册 -->
                <el-button type="primary" @click="dialogVisible = true" style="margin-left: 16px" class="bt">点击注册</el-button>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                    <el-form v-model="zhuce">
                        <el-form-item>
                            <el-input v-model="zhuce.zcname" placeholder="请输入姓名" @input="change($event)" />
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                v-model="zhuce.username"
                                placeholder="请输入用户名"
                                :error-message="usernamemsg"
                                @input="change($event)"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                v-model="zhuce.password"
                                type="password"
                                placeholder="请输入密码"
                                error-message="密码格式错误"
                                @input="change($event)"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                v-model="zhuce.phone"
                                placeholder="请输入手机号"
                                error-message="手机号格式错误"
                                @input="change($event)"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                v-model="zhuce.code"
                                center
                                placeholder="请输入短信验证码"
                                error-message="验证码格式错误"
                                @input="change($event)"
                            >
                                <el-button slot="button" type="primary">发送验证码</el-button>
                            </el-input>
                        </el-form-item>

                        <el-button type="primary" @click="GetSucces()" class="zc"> 注册</el-button>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 用户信息 -->
                <el-table :data="ZData" border style="width: 100%">
                    <el-table-column prop="username" label="用户名"> </el-table-column>
                    <el-table-column prop="zcname" label="用户姓名"> </el-table-column>
                    <el-table-column prop="userId" label="用户编号"> </el-table-column>
                    <el-table-column prop="phone" label="手机号"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button class="AA" @click="handleClicks(scope.row), (drawer_2 = true)" type="primary">编辑</el-button>
                            <el-drawer :visible.sync="drawer_2" :with-header="false">
                                <div><h1>用户信息</h1></div>
                                <el-form v-model="information">
                                    <el-form-item label="用户名" :label-width="formLabelWidth">
                                        <el-input v-model="information.userId" autocomplete="off" @input="change($event)"></el-input>
                                    </el-form-item>
                                    <el-form-item label="原密码" :label-width="formLabelWidth">
                                        <el-input
                                            type="password"
                                            v-model="information.password"
                                            autocomplete="off"
                                            @input="change($event)"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="新密码" :label-width="formLabelWidth">
                                        <el-input
                                            type="password"
                                            v-model="information.Newpassword"
                                            autocomplete="off"
                                            @input="change($event)"
                                        ></el-input>
                                    </el-form-item>
                                    <el-button type="primary" @click="GetAdd2()">确定</el-button>
                                </el-form>
                                <!--  权限选择   -->
                                <div><h1>权限</h1></div>
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                                    >全选</el-checkbox
                                >
                                <div style="margin: 15px 0"></div>
                                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                                </el-checkbox-group>
                            </el-drawer>
                            <el-button class="AA" type="primary" @click="SetClear3()">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
const cityOptions = ['系统管理', '用户注册', '部门管理', '项目管理'];
export default {
    data() {
        return {
            a: [],
            b: [],
            c: [],
            information: [],
            tabPosition: 'left',
            dialogVisible: false,
            dialogVisible_1: false,
            fullscreen: true,
            loading: false,
            form: {
                ProId: '',
                ProName: '',
                ProUnit: '',
                CrateTime: ''
            },
            formLabelWidth: '80px',
            timer: null,
            tableData: [
                {
                    ProName: '吾问无为谓',
                    ProId: '1212121',
                    ProUnit: '撒啊飒飒',
                    CrateTime: '2021-1-1',
                    ProUser: 'dwdw'
                }
            ],
            ZData: [
                {
                    userId: '0001',
                    username: '1212121',
                    password: '212121',
                    phone: '12121212112',
                    zcname: '阿三'
                }
            ],
            zhuce: {
                userId: '0002',
                zcname: '',
                username: '',
                password: '',
                phone: '',
                code: ''
            },
            drawer: false,
            drawer_1: false,
            drawer_2: false,
            drawer_3: false,
            direction: 'ltr',
            active_1: {
                ProName: '',
                ProId: '',
                ProUnit: '',
                CrateTime: '',
                ProUser: ''
            },
            active: {
                branchName: '',
                branchNum: '',
                unitStatus: '',
                principal: '',
                phone: '',
                serialNumber: '',
                remark: '',
                createTime: null,
                updateTime: null
            },
            bumen: [
                {
                    branchName: '阿三大',
                    branchNum: '0001',
                    unitStatus: '0001',
                    principal: '萨达',
                    phone: '110022334',
                    serialNumber: '111',
                    remark: '111',
                    createTime: null,
                    updateTime: null
                },
                {
                    branchName: '阿三大',
                    branchNum: '0001',
                    unitStatus: '0001',
                    principal: '萨达',
                    phone: '110022334',
                    serialNumber: '111',
                    remark: '111',
                    createTime: null,
                    updateTime: null
                },
                {
                    branchName: '阿三大',
                    branchNum: '0001',
                    unitStatus: '0001',
                    principal: '萨达',
                    phone: '110022334',
                    serialNumber: '111',
                    remark: '111',
                    createTime: null,
                    updateTime: null
                }
            ],
            checkAll: false,
            checkedCities: ['上海', '北京'],
            cities: cityOptions,
            isIndeterminate: true
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },

        GetForm() {
            if (this.form.ProId == '' && this.form.ProName == '') {
                this.$message({
                    message: '项目编号或名字不能为空',
                    type: 'error'
                });
            } else {
                // // this.form = this.tableData
                // console.log(this.form);
                // // this.b.push(this.form)
                // // this.a = [...this.tableData,...this.b]
                // document.write(this.tableData.concat(this.form));

                this.tableData.push(this.form);
                // console.log(this.tableData);
                this.$message({
                    message: '提交成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },
        handleClick(row) {
            this.active_1 = row;
            this.a = row;
        },
        handleClick_1(row) {
            console.log(row, 7865444444444);
            // (this.b = row), (this.active = this.b);
            // (this.bumen = row), (this.active = row);
            this.active = row;
            this.c = row;
        },
        handleClicks(row) {
            this.information = row;
        },

        GetSucces2() {
            if (this.active.branchNum == '' || this.active.branchName == '') {
                this.$message({
                    message: '请输入用户名或密码',
                    type: 'error'
                });
            } else {
                this.bumen.push(this.active);
                this.$message({
                    message: '注册成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },
        Getadd() {
            this.information = this.c;
            this.$message({
                message: '修改成功',
                type: 'success'
            });
        },
        Getadd1() {
            this.active_1 = this.a;
            this.$message({
                message: '修改成功',
                type: 'success'
            });
        },
        GetAdd2() {
            if (this.information.Newpassword == this.information.password) {
                this.$message({
                    message: '不能与原密码相同',
                    type: 'success'
                });
            } else {
                this.ZData.password = this.information.Newpassword;
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },
        //删除
        SetClear() {
            // this.comName.splice(this.b, 1);
            for (let i = 0; i < this.tableData.length; i++) {
                this.active = this.tableData[i];
                this.tableData.splice(this.active, 1);
            }
        },
        //删除
        SetClear1() {
            // this.comName.splice(this.b, 1);
            for (let i = 0; i < this.bumen.length; i++) {
                this.active = this.tableData[i];
                this.tableData.splice(this.active, 1);
            }
        },
        //删除
        SetClear2() {
            // this.comName.splice(this.b, 1);
            for (let i = 0; i < this.zhuce.length; i++) {
                this.active = this.tableData[i];
                this.tableData.splice(this.active, 1);
            }
        },
        //注册
        usernamemsg() {
            if (this.username === '') {
                return '';
            } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
                return '手机号码格式错误';
            } else {
                return '';
            }
        },

        GetSucces() {
            if (this.username == '' || this.password == '') {
                this.$message({
                    message: '请输入用户名或密码',
                    type: 'error'
                });
            } else {
                this.ZData.push(this.zhuce);
                this.$message({
                    message: '注册成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },
        change() {
            this.$forceUpdate();
        },
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    }
};
</script>

<style scoped>
.el-dialog--center {
    height: 70% !important;
}

.An {
    margin: 10px;
}
.el-table {
    margin: 10px;
}
.el-button--small {
    display: block;
    margin: 0 auto;
}
.AA {
    float: left;
    margin-left: 10%;
}
/deep/ .el-drawer__body {
    margin: 10px !important;
}
.bt {
    color: #fff;
}
.dialog-footer {
    display: flex;
    margin-top: 100px;
}
.zc {
    margin: 10px;
    float: right;
}
/deep/ .el-dialog {
    height: 620px !important;
    width: 40%;
}
.el-input {
    margin: 10px;
}
/deep/ .el-table__body,
.el-table__footer,
.el-table__header {
    /* table-layout: auto; */
    width: 100%;
}
.dialog-footer {
    margin-top: 13px;
}
</style>